<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" id="form"></form>
        <!-- <p>
            <label for="">用户名：</label>
            <input type="text">
        </p>
        <p>
            <label for="">密码：</label>
            <input type="password">
        </p> -->


    <script>
        var arr = [{
        label: "用户名",
        name: "username",
        type: "text"
        }, {
        label: "密码",
        name: "password",
        type: "password"
        }, {
        label: "性别",
        name: "gender",
        type: "select",
        value: ['男', '女', '不男', '不女', 'Gay', '妖王']
        }, {
        label: "爱好",
        name: "hobby",
        type: "checkbox",
        value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
        }, {
        label: '是否已婚',
        name: 'married',
        type: 'radio',
        value: ['已婚', '未婚']
        },{
        label: '简介',
        name: 'resume',
        type: 'textarea'
        }];

        // 获取元素
        var form = document.querySelector('#form')

        //循环遍历数组，根据数组的数据生成表单
        arr.forEach(function(item,index){
            //生成一个P标签 label标签
            var p = document.createElement('p')
            var label = document.createElement('label')
            label.innerHTML = item.label + ':'
            p.appendChild(label)

            // 根据数组对象中 type类型来判断生成什么样的 input 标签
            var input
            switch (item.type) {
                case 'text':
                case 'password':
                    //文本框，密码框
                    input = document.createElement('input')
                    input.type = item.type
                    input.id = item.name
                    p.appendChild(input)
                    break;
                case 'radio':
                case 'checkbox':
                    //爱好 value循环生成的值
                    input = document.createElement('span')
                    item.value.forEach(function(items,index){
                        var inp = document.createElement('input')
                        var text = document.createElement('label')
                        text.innerHTML = items
                        inp.type = item.type
                        inp.name = item.name
                        input.appendChild(inp)
                        input.appendChild(text)
                    })
                    p.appendChild(input)
                    break
                    case 'select':
                        //循环对象里的value 生成option标签
                        input = document.createElement('select')
                        item.value.forEach(function(items,index){
                            var option = document.createElement('option')
                            option.innerHTML = input.appendChild(option)
                        })
                        p.appendChild(input)
                        break
                    case 'textarea':
                        input = document.createElement('textarea')
                        p.appendChild(input)
            }
            //把p标签 放入到form中
            form.appendChild(p)

        })
     
        </script>
</body>
</html>